<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="themes/base.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="themes/jquery.mobile.structure-1.4.5.min.css" />
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="js/product.selector.js"></script>
    <title>幸运抽奖管理</title>
    <style type="text/css">
        .ui-page-theme-a .ui-btn.changed {
            background-color: #3388cc;
            color: #fff;
        }

        h3.ui-bar.ui-bar-a {
            margin-bottom: 0px;
        }

        .summary {
            font-size: 12px;
        }
        .multiple .ui-controlgroup-controls{
            display: flex;
            justify-content: space-between;
        }

    </style>
</head>

<body>
    <div data-role="page" data-theme="a">
        <form name="settingForm" onsubmit="return false;">
            <h3 class="ui-bar ui-bar-a">抽奖条件设置</h3>
            <div data-role="content" data-theme="a">

                <div class="ui-field-contain">
                    <label for="trade_amount">完成交易笔数:</label>
                    <input type="number" name="trade_amount" id="trade_amount" placeholder="输入数值" value="1">
                </div>
                <div class="ui-field-contain">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <input type="radio" name="relationship" id="relationship_or" value="or">
                        <label for="relationship_or">或者</label>
                        <input type="radio" name="relationship" id="relationship_and" value="and">
                        <label for="relationship_and">并且</label>
                    </fieldset>
                </div>
                <div class="ui-field-contain">
                    <label for="trade_money">完成交易金额(元):<span id="rateshow"></span></label>
                    <input type="number" name="trade_money" id="trade_money" placeholder="输入数值" value="1">
                </div>
                <div class="ui-field-contain">
                    <label for="times">增加抽奖次数:</label>
                    <input type="range" name="times" id="times" value="1" min="1" max="10" data-highlight="true">
                </div>
                <div class="ui-field-contain">
                    <button class="ui-btn ui-btn-b" id="btnSubmit_setting">保存</button>
                </div>
            </div>
            <h3 class="ui-bar ui-bar-a">积分倍率设置</h3>
            <div data-role="content" data-theme="a">
                <div class="ui-field-contain">
                    <label for="pay_money">单倍概率所需积分:</label>
                    <input type="number" name="pay_money" id="pay_money" placeholder="输入积分数量" value="100" min="1">
                    <p class="summary">顾客参与抽奖单倍概率需要支付的积分数，选择不同的倍率收取对应倍数的积分。顾客支付的积分越多，中奖概率也就越高。</p>
                </div>
                <div class="ui-field-contain">
                    <label for="random_rate_enabled">启用随机积分:</label>
                    <input type="checkbox" data-role="flipswitch" name="random_rate_enabled" id="random_rate_enabled" data-on-text="开启" data-off-text="关闭" data-wrapper-class="custom-label-flipswitch">
                    <p class="summary">开启后，顾客每次抽奖支付的单倍概率所需积分将在<span class="current_random_rate">100-300</span>之间随机生成。</p>
                </div>
                
                <div class="ui-field-contain multiple">
                    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                        <legend>可选倍率</legend>
                        <input type="checkbox" name="multiple" class="multiple_item" id="multiple_1" value="1">
                        <label for="multiple_1">1</label>
                        <input type="checkbox" name="multiple" class="multiple_item" id="multiple_2" value="2">
                        <label for="multiple_2">2</label>
                        <input type="checkbox" name="multiple" class="multiple_item" id="multiple_3" value="3">
                        <label for="multiple_3">3</label>
                        <input type="checkbox" name="multiple" class="multiple_item" id="multiple_4" value="4">
                        <label for="multiple_4">4</label>
                        <input type="checkbox" name="multiple" class="multiple_item" id="multiple_5" value="5">
                        <label for="multiple_5">5</label>
                        <input type="checkbox" name="multiple" class="multiple_item" id="multiple_6" value="6">
                        <label for="multiple_6">6</label>
                        <input type="checkbox" name="multiple" class="multiple_item" id="multiple_7" value="7">
                        <label for="multiple_7">7</label>
                        <input type="checkbox" name="multiple" class="multiple_item" id="multiple_8" value="8">
                        <label for="multiple_8">8</label>
                        <input type="checkbox" name="multiple" class="multiple_item" id="multiple_9" value="9">
                        <label for="multiple_9">9</label>
                        <input type="checkbox" name="multiple" class="multiple_item" id="multiple_10" value="10">
                        <label for="multiple_10">10</label>
                    </fieldset>
                </div>
                <div class="ui-field-contain">
                    <label>积分不足时推荐购买商品:</label>
                    <div style="display: flex;align-items: center;background-color: #f5f5f5;border: #ddd solid 1px;padding: 7px;margin: 0px;position: relative;">
                    <img id="productSelector" class="score_product_pic" style="width: 80px;height: 80px;border: #ccc solid 1px;" src=""/>
                    <p style="display: flex;flex-direction: column;line-height: 25px;font-size: 13px;padding: 0px;margin: 0px;margin-left: 10px">
                        <span class="score_product_title"></span>
                        <span class="score_product_money"></span>
                        <span class="score_product_give" style="display: flex;align-items: center"></span>
                    </p>
                        <img class="score_product_remove" style="display:none;position: absolute;top:5px;right:5px;width: 25px;height: 25px;" src=""/>
                    </div>
                </div>
                <div class="ui-field-contain">
                    <button class="ui-btn ui-btn-b" id="btnSubmit_multiple">保存</button>
                </div>
            </div>
            <h3 class="ui-bar ui-bar-a">分享送抽奖</h3>
            <div data-role="content" data-theme="a">
                <div class="ui-field-contain">
                    <input type="checkbox" data-role="flipswitch" name="share_open" id="share_open" data-on-text="开启" data-off-text="关闭" data-wrapper-class="custom-label-flipswitch">
                </div>
                <div class="ui-field-contain">
                    <label for="trade_amount">成功分享人数:</label>
                    <input type="number" name="share_amount" id="share_amount" placeholder="输入数值" value="1" min="1">
                    <p class="summary">赠送免费抽奖1次</p>
                </div>
                <div class="ui-field-contain">
                    <label for="trade_amount">概率递增模式:</label>
                    <input type="checkbox" data-role="flipswitch" name="share_multiple_rate" id="share_multiple_rate" data-on-text="开启" data-off-text="关闭" data-wrapper-class="custom-label-flipswitch">
                    <p class="summary">开启后每成功分享<span id="share_multiple_rate_number">1</span>人增加一倍中奖概率</p>
                </div>
                
                <div class="ui-field-contain">
                    <button class="ui-btn ui-btn-b" id="btnSubmit_share">保存</button>
                </div>
            </div>
        </form>
    </div>

    <script type="text/javascript">
        //防止token变更
        document.cookie.split(" ").join("").split(";").forEach(function(cookie){
            if(cookie.indexOf("token")==0){
                let hostname = window.location.hostname.substring(window.location.hostname.indexOf("."));
                let token = cookie.split("=")[1];
                let fn = function(){
                    document.cookie = "token="+ escape (token) + ";domain="+hostname+";path=/";
                };
                document.addEventListener("mousedown",fn);
                document.addEventListener("touchstart",fn);
                document.addEventListener("click",fn);
            }
        });
        var apiHost = "https://" + window.location.hostname + "/plugin/api";
        var key = 'plugin.zhuanpan.setting';

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
        var app_id = GetQueryString("app_id");
        let ps = new ProductSelector();
        $("#productSelector").click(function(){
            ps.multiple = false;
            ps.moneyMode = "salemoney";
            ps.addEventListener("success",function(){
                updateScoreProduct(ps.selectedItem);
                $('#btnSubmit_multiple').addClass("changed");
            });
            ps.open(app_id);
        });
        function updateScoreProduct(product){
            $(".score_product_pic").prop("src",product.album[0]+"?imageView2/1/w/80/h/80");
            $(".score_product_title").html(product.name);
            $(".score_product_money").html("价格：￥"+product.salemoney);
            $(".score_product_remove").show();
            $.get(apiHost+"/remote.call?url="+encodeURIComponent("https://service-2wggf83t-1255950678.ap-shanghai.apigateway.myqcloud.com/release/get-product-score?app_id="+app_id+"&product_id="+product.id),null,function(res){
                if(res===null){
                    $(".score_product_give").html("(请使用积分插件进行配置)");
                }else{
                    $(".score_product_give").html("每件赠送积分："+res);
                }
            });
        }
        $(".score_product_remove").click(function(){     
            $(".score_product_pic").prop("src","");
            $(".score_product_title").html("");
            $(".score_product_money").html("");
            $(".score_product_give").html("");
            $(".score_product_remove").hide();
            ps.selectedItem = null;
            ps.selectedValue = null;
            $('#btnSubmit_multiple').addClass("changed");
        });
        function load() {
            let form = document.settingForm;
            $.ajax({
                url: apiHost + "/cache.app.get?app_id=" + app_id + "&key=" + key,
                type: "GET",
                dataType: "json",
                success: function(res) {
                    if (res) {
                        form.trade_amount.value = res.trade_amount;
                        form.trade_money.value = res.trade_money;
                        $("#times").val(res.times).slider("refresh");
                        $("#relationship_" + res.relationship).prop("checked", true).checkboxradio( "refresh" );
                        form.share_amount.value = res.share_amount;
                        $("#share_multiple_rate_number").html(res.share_amount);
                        $("#share_open").prop("checked", res.share_open).flipswitch("refresh");
                        $("#share_multiple_rate").prop("checked", res.share_multiple_rate).flipswitch("refresh");
                        if(res.multiples){
                            form.multiple.forEach(function(item){
                                for(let i=0;i<res.multiples.length;i++){
                                    if(item.value==res.multiples[i]){
                                        $(item).prop("checked",true).checkboxradio( "refresh" );
                                        break;
                                    }
                                }
                            });
                        }
                        $("#pay_money").val(res.pay_money);
                        $(".current_random_rate").html(res.pay_money+"-"+(Number(res.pay_money)*3));
                        $("#random_rate_enabled").prop("checked",res.random_rate_enabled==true).flipswitch("refresh");
                        if(res.score_product&&res.score_product.id){
                            $.get(apiHost+"/product.get?product_id="+res.score_product.id,null,function(s_product){
                                s_product.result.score_product_give = res.score_product.score_product_give;
                                updateScoreProduct(s_product.result);
                                ps.selectedItem = s_product.result;
                            }); 
                        }
                    }
                },
                complete:function(){
                    $(function() {
                        $("#trade_amount").change(function() {
                            $('#btnSubmit_setting').addClass("changed");
                        });
                        $("#trade_money").change(function() {
                            $('#btnSubmit_setting').addClass("changed");
                        });
                        $("#times").change(function(event, ui) {
                            $('#btnSubmit_setting').addClass("changed");
                        });
                        $("#relationship_or").change(function() {
                            $('#btnSubmit_setting').addClass("changed");
                        });
                        $("#relationship_and").change(function() {
                            $('#btnSubmit_setting').addClass("changed");
                        });
                        $("#share_open").change(function() {
                            $('#btnSubmit_share').addClass("changed");
                        });
                        $("#share_amount").change(function() {
                            $('#btnSubmit_share').addClass("changed");
                            $('#share_multiple_rate_number').html($("#share_amount").val());
                        });
                        $("#share_multiple_rate").change(function() {
                            $('#btnSubmit_share').addClass("changed");
                        });
                        $("#pay_money").change(function(){
                            $('#btnSubmit_multiple').addClass("changed");
                            $(".current_random_rate").html(this.value+"-"+(Number(this.value)*3));
                        });
                        $("#random_rate_enabled").change(function(){
                            $('#btnSubmit_multiple').addClass("changed");
                        });
                        $(".multiple_item").change(function(){
                            $('#btnSubmit_multiple').addClass("changed");
                        });
                        $('#btnSubmit_setting').click(save);
                        $('#btnSubmit_multiple').click(save);
                        $('#btnSubmit_share').click(save);
                    });
                }
            });

        }

        function save() {
            $.mobile.loading( "show" );
            let form = document.settingForm;
            let multiples = new Array();
            form.multiple.forEach(function(item){
                if(item.checked){
                   multiples.push(Number(item.value));
                }
            });
            let data = JSON.stringify({
                trade_amount: Number(form.trade_amount.value),
                trade_money: Number(form.trade_money.value),
                times: Number(form.times.value),
                relationship: form.relationship.value,
                share_open: form.share_open.checked,
                share_amount: Number(form.share_amount.value),
                share_multiple_rate:form.share_multiple_rate.checked,
                share_times: 1,
                multiples:multiples,
                pay_money:Number(form.pay_money.value),
                random_rate_enabled:form.random_rate_enabled.checked,
                score_product:ps.selectedItem
            });
            $.ajax({
                url: apiHost + "/cache.app.set?app_id=" + app_id + "&key=" + key,
                type: "POST",
                contentType: "text/plain; charset=utf-8",
                data: data,
                success: function(res) {
                    $('#btnSubmit_setting').removeClass("changed");
                    $('#btnSubmit_share').removeClass("changed");
                    $('#btnSubmit_multiple').removeClass("changed");
                },
                error: function(jqXHR) {
                    alert(jqXHR.responseJSON.message);
                },
                complete: function(res) {
                    $.mobile.loading( "hide" );
                }
            });
        }
        load();
        

    </script>
</body>

</html>
